<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>隐藏与显示</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: antiquewhite;

      /* 1、使用display隐藏元素——不占据屏幕空间 显示元素：block*/
      /* display: none; */

      /* 2、使用visibility隐藏元素 ——仍然占据屏幕空间 显示元素：visible*/
      /* visibility: hidden; */

      /* 3、使用opacit（透明度）隐藏元素0-1 * ——仍然占据屏幕空间/
      opacity: 0;

      /* 4、使用overflow隐藏元素 ——将超出父元素的内容隐藏 */
      /* overflow: hidden; */

      /* 5、超出父元素的部分以滚动条的形式打开 */
      /* overflow: scroll; */

      /* 6、自适应 */
      overflow: auto;

      /* 7、设置游标表现形式-悬浮时将鼠标箭头变成小手 */
      cursor: pointer;
    }
  </style>
</head>

<body>
  <!-- 面试题 -->
  <div>
    我是div标签<br>
    我是div标签<br>
    我是div标签<br>
    我是div标签<br>
    我是div标签<br>
    我是div标签<br>
    我是div标签<br>

  </div>


</body>

</html>